<template lang="">
  <div class="home">
    <van-search v-model="searchStr" placeholder="请输入搜索关键词" />
    <div class="main">
    <van-list
      v-model:loading="loadingMore"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoadMore"
    >
      <van-pull-refresh v-model="loading" @refresh="onRefresh">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(itme, index) in bannerArr" :key="itme.bannerid">
              <van-image width="100%" height="200px" :src="itme.img" />
            </van-swipe-item>
          </van-swipe>

          <van-grid :column-num="5">
            <van-grid-item
              v-for="value in menuArr"
              :key="value.id"
              :icon="value.icon"
              :text="value.title"
            />
          </van-grid>

          <van-grid :border="false" :column-num="2">
            <van-grid-item v-for="itme in productArr" :key="itme.proid" @click="productItemClick(itme)">
              <van-image :src="itme.img1" />
              <van-text-ellipsis :content="itme.proname" rows="2" style="width: 150px" />
              <p>{{ itme.originprice }}</p>
            </van-grid-item>
          </van-grid>
        </van-pull-refresh>
        <van-back-top right="2vw" bottom="10vh" />
      </van-list>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { getBannerList, getMenuList, getProductList } from '@/api/product'
let router = useRouter()
let searchStr = ref('')

// 轮播数据
let bannerArr = ref([])
getBannerList().then((r) => {
  bannerArr.value = r.data
})

// 菜单数据
let menuArr = ref([])
getMenuList().then((r) => {
  menuArr.value = r.data
})

// 获取首页列表数据
let count = ref(1)
let limitNum = ref(10)
interface IProductListItem {
  proname: string
  img1: string
  originprice: number
  proid: string
}
// ref<参数的类型>（参数）
// ref<Array>（[]）
let productArr = ref<Array<IProductListItem>>([])

getProductList(count.value,limitNum.value ).then((r) => {
  productArr.value = r.data
})




const loadingMore = ref(false)
const finished = ref(false)
function onLoadMore() {
  count.value++ //让页码加1
  getProductList(count.value,limitNum.value ).then((r) => {
    let data= r.data
    productArr.value.push(...data)
    loadingMore.value = false
    if (r.data.length < limitNum.value) {
      finished.value = true //结束加载更多
    }
  })
}
// 下拉刷新
import { showToast } from 'vant'
const loading = ref(false)
const onRefresh = () => {
  count.value = 1 // 重置页码
  setTimeout(() => {
    showToast('刷新成功')
  }, 500)
  getProductList(count.value,limitNum.value ).then((r) => {
    console.log(r)
    productArr.value = r.data
    loading.value = false
  })
}



function productItemClick(item: IProductListItem) {
  router.push('/detail?pid=' + item.proid)
}





</script>
<style lang="scss" >
p {
  text-align: left;
}
.home {
  height: 100%;
  display: flex;
  flex-direction: column;
  .main {
    flex: 1;
    overflow: auto;
  }
}
</style>
